<script setup>
import {ref,inject} from 'vue'
import {v4 as uuidv4} from 'uuid';



const thing = ref('')
const emits = defineEmits(['addTodoList'])
//向App组件传递一个todo的对象
//定义一个空数组用来存放判断是否相同数据的数组
const emittedTodos = ref([])
const addTodoList = () => {  
  if (thing.value) {  
    const content = thing.value.trim()  
    if (emittedTodos.value.includes(content)) {  
      // 如果输入的内容已经存在于已发射的Todo中，则弹出警告  
      alert('输入的内容已存在，请输入不同的内容！')  
      thing.value = '' // 清空输入框  
    } else {  
      const todo = {  
        id: uuidv4(),  
        content: content,  
        done: false,  
      }  
      emits('addTodoList', todo)  
      // 将新添加的Todo内容添加到已发射的Todo列表中  
      emittedTodos.value.push(content)  
      thing.value = '' // 清空输入框  
    }  
  } else {  
    alert('请输入有效的内容，内容不能为空')  
  }  
}  
</script>

<template>
    <div class="myhead">
    <h1>TodoList</h1>
    <div class="add-todo">
      <input type="text" placeholder="请输入待办事项..." class="thing" v-model.trim="thing" @keyup.enter="addTodoList">
      <button class="add" @click="addTodoList">添加</button>
    </div>
  </div>
</template>

<style scoped>
</style>